<template>
  <view>
    <view class = "search-box">
      <uni-search-bar @input ="input" :radius="100" cancelButton="none">
      </uni-search-bar>
      <!--搜索建议列表-->
      <view class = "sugg-list" v-if = "searchResults.length !== 0">
        <view class = "sugg-item" v-for = "(item,i) in searchResults" :key = "i" @click = "gotoDetail(item)">
             <view class = "goods-name">{{item.goods_name}}</view>
             <uni-icons type = "arrowright" size = "16"></uni-icons>
        </view>
      </view>
      <!--搜索历史列表-->
      <view class = "history-box" v-else>
         <!--标题区域-->
         <view class= "history-title">
            <text>搜索历史</text>
            <uni-icons type = "trash" size="17"  @click = "clean"></uni-icons>
         </view>
         <!--列表区域-->
         <view class= "history-list">
           <uni-tag :text = "item" v-for="(item,i) in histories" :key = "i" @click="gotoGoodsList(item)">
           </uni-tag>
         </view>
      </view>
    </view>    
  </view>
</template>

<script>
  export default {
    data() {
      return {
         timer : null, //延时器的id
         kw : null,
         //搜索的结果列表
         searchResults : [],
         historyList : ['a','app','apple']
      }
    },
    methods:{
      //input输入事件的处理函数
      input(e) {
       // console.log(e)
       //输入防抖处理，防止每次点击键盘，都发起ajax请求
       clearTimeout(this.timer) //清除延时器
       this.timer = setTimeout(()=>{//从新生成一个延时器
         this.kw = e
         this.getSearchList()
       },500)
      },
      async getSearchList() {
        //判断搜索关键字是否为空
        if(this.kw.length === 0){
           this.searchResults = []
           return
        }
        const {data: res} = await uni.$http.get('/api/public/v1/goods/qsearch',{query:this.kw})
        if(res.meta.status !== 200) return uni.$showMsg()
        this.searchResults = res.message
        
        this.saveSearchHistory()
      } ,
      gotoDetail(item) {
        //console.log(item)
        uni.navigateTo({
          url : '/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
        })
      },
      saveSearchHistory() {
        //this.historyList.push(this.kw)
         const set =  new Set(this.historyList)
         set.delete(this.kw)
         set.add(this.kw)
         this.historyList = Array.from(set)
         //对搜索历史数据进行持久化
         uni.setStorageSync('kw',JSON.stringify(this.historyList))
         
      },
      gotoGoodsList(kw){
        uni.navigateTo({
          url:"/subpkg/goods_list/goods_list?query=" + kw
        })
      },
      onLoad() {
        this.historyList = JSON.parse(uni.getStorageSync('kw' || '[]'))
      },
      clean() {
        this.historyList = []
        uni.setStorageSync('kw','[]')
      }
  },
  computed : {
    histories(){//数组翻转
      return [...this.historyList].reverse()
    }
  }
  }
</script>

<style lang="scss">
    .search-box {
      //实现吸顶效果
      position: sticky;
      top: 0;
      z-index: 999;
    }
    
    .sugg-list{ 
      padding : 0 5px;
      .sugg-item{
          display: flex;
          align-items : center;
          justify-content: space-between;
          font-size: 12px;
          padding: 13px 0;
          border-bottom: 1px solid #efefef;
        .goods-name {
          //文字不能换行
          white-space: nowrap;
          //隐藏多余部分
          overflow: hidden;
          text-overflow: ellipsis;//用小圆点表示未显示全的部分
          margin-right: 3px; 
        }
    }
  }
  .history-box {
    padding: 0 5px;
    .history-title {
       display: flex;
       justify-content: space-between;
       height: 40px;
       align-items: center;
       font-size: 13px;
       border-bottom: 1px solid #efefef;
    }
  }
  
  .history-list{
    display: flex;
    flex-wrap: wrap;
    
     .uni-tag {
       margin-top: 5px;
       margin-right: 5px;
     }
  }
</style>
